<template>
	<view class="container">
		<!--header-->
		<!-- #ifndef H5-->
		<view class="tui-header-box" :style="{ height: height + 'px'}">
			<view class="tui-header" :style="{ paddingTop: top + 'px' }">个人信息</view>
			<view @tap="back" class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<view class="tui-icon-box">
					<tui-icon name="arrowleft" :size="36" :color="'#000'"></tui-icon>
				</view>
			</view>
		</view>
		<view class="topheight" :style="{ height: height + 'px' }">.</view>
		<!-- #endif -->
		<!--header-->
		<view class="tui-userinfo-box">
			<!-- #ifndef MP-WEIXIN -->
			<button class="avatar-wrapper" @click="onChooseAvatar2">
				<tui-list-cell padding="0" :arrow="true">
					<view class="tui-list-cell">
						<view>头像</view>
						<image :src="memberinfo.userpic" class="tui-avatar"></image>
					</view>
				</tui-list-cell>
			</button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<tui-list-cell padding="0" :arrow="true">
					<view class="tui-list-cell">
						<view>头像</view>
						<image :src="memberinfo.userpic" class="tui-avatar"></image>
					</view>
				</tui-list-cell>
			</button>
			<!-- #endif -->
			<tui-list-cell padding="0" :arrow="true" @click="nickname">
				<view class="tui-list-cell">
					<view>昵称</view>
					<view class="tui-content">{{memberinfo.nickname}}</view>
				</view>
			</tui-list-cell>
			<tui-list-cell padding="0" :arrow="true" @click="changeSex">
				<view class="tui-list-cell">
					<view>性别</view>
					<view class="tui-content">{{sex}}</view>
				</view>
			</tui-list-cell>
			<!--<picker mode="date" @change="changeDate">
			<tui-list-cell padding="0" :arrow="true" unlined>
				<view class="tui-list-cell">
					<view>出生日期</view>
					<view class="tui-content">{{date}}</view>
				</view>
			</tui-list-cell>
		</picker>-->
			<tui-list-cell padding="0" :lineLeft="false" :arrow="true" @click="navigateTo('/pagesA/my/address/address')">
				<view class="tui-list-cell">
					地址管理
				</view>
			</tui-list-cell>
			<view class="tui-exit">
				<tui-button @click="logout" shape="circle" type="danger" height="88rpx">退出登录</tui-button>
			</view>
			<view class="tui-delid">
				<tui-button @click="delid" shape="circle" type="white" height="88rpx">注销帐号</tui-button>
			</view>

			<!-- #ifdef H5 -->
			<tui-modal :show="wxmpautomodal" @cancel="wxmpautomodalcancel" :custom="true" fadeIn>
				<view class="tui-modal-custom">
					<view class="tui-prompt-title">你可以自动获取微信头像昵称</view>
					<view class="tui-modal__btn">
						<view class="tui-box">
							<button :style="'background:'+ pagestyleconfig.appstylecolor" class="tui-btn-danger"
								@click="getmpuserinfo">自动获取微信头像昵称</button>
						</view>
						<view class="tui-box">
							<tui-button type="white" shape="circle" height="80rpx" :size="26"
								@click="wxmpautomodalcancel">手动填写</tui-button>
						</view>
					</view>
				</view>
			</tui-modal>
			<!-- #endif -->
		</view>
		<view class="agreement">
			<view class="agreementbox">
				<label class="agreementcla"
					@click="showagreementAlert('useragreement')">用户协议</label>|<label class="agreementcla"
					@click="showagreementAlert('privacypolicy')">隐私政策</label>
			</view>
			<tui-modal :show="showagreement" @cancel="hidewagreementAlert" padding="40rpx 40rpx" custom>
				<view class="tui-modal-agreement">
					<image src="/static/images/mall/icon_popup_closed.png" class="tui-close__img" @tap.stop="hidewagreementAlert">
					</image>
					<scroll-view :style="'height:'+(windowHeight-360)+'px'" scroll-y="true">
						<view class="tui-modal-agreement-text">
							<text>{{agreement.thiscontent}}</text>
						</view>
					</scroll-view>
				</view>
			</tui-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 64, //header高度
				windowHeight:0,
				top: 26, //标题图标距离顶部距离
				arrowTop: 0, //箭头距离顶部距离
				sex: '男',
				date: '请选择',
				pagestyleconfig: [],
				memberinfo: [],
				gotopage: '',
				agreement: {},
				showagreement: false,
				wxmpautomodal: false,
			}
		},
		onLoad(e) {
			var _this = this;
			let obj = {};
			setTimeout(() => {
				uni.getSystemInfo({
					success: res => {
						this.windowHeight = res.windowHeight;
						this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight +
							44;
						this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res
							.statusBarHeight + 6;
						this.arrowTop = obj.top ? obj.top + (obj.height - 32) / 2 : res
							.statusBarHeight + 6;
						
					}
				});
			}, 0);
			if (e.gotopage) {
				this.gotopage = e.gotopage;
				uni.setStorageSync("gotopage", this.gotopage);
			} else {
				this.gotopage = uni.getStorageSync('gotopage')
			}
			_this.$request.post('config', {
				mo: 'pagestyle'
			}).then(res => {
				if (res.errno == 0) {
					_this.pagestyleconfig = res.data
				}
			});
			_this.$request.post('Agreement.memberlogin').then(res => {
				if (res.errno == 0) {
					_this.agreement = res.data;
				}
			});
		},
		onShow: function() {
			let _this = this;
			_this.memberdetail();
		},
		/*
		onUnload: function() {
			uni.navigateTo({
				url: '/pagesA/my/userInfo/index'
			});
		},
		*/
		methods: {
			memberdetail: function() {
				let _this = this;
				var isWeixin = 0;
				// #ifdef H5
				var ua = navigator.userAgent.toLowerCase();
				isWeixin = ua.indexOf('micromessenger') != -1;
				// #endif
				
				_this.$util.getUserInfo(function(userInfo) {
					//Console.log("adfs");
					_this.$request.get('member.detail', {
						samkey: (new Date()).valueOf()
					}).then(res => {
						if (res.errno == 0) {
							_this.memberinfo = res.data;
							_this.sex = res.data.sex;
							if (isWeixin) {
								if (_this.memberinfo.nickname == '微信用户' || _this.memberinfo.nickname ==
									'匿名用户') {
									_this.wxmpautomodal = true
								}
							}
				
						}
					});
				})
			},
			getmpuserinfo: function() {
				let _this = this;
				_this.$util.getmpuserinfo().then(res => {
					uni.navigateTo({
						url: '/pagesA/my/userInfo/index'
					});
				});
			},
			wxmpautomodalcancel() {
				this.wxmpautomodal = false
			},
			back() {
				console.log(this.gotopage);
				this.sam.navigateTo(this.gotopage);
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			onChooseAvatar(e) {
				this.tui.href('/pagesA/my/cropper/cropper?src=' + e.detail.avatarUrl);
				console.log(e);
			},
			
			onChooseAvatar2() {
				let _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						console.log(res);
						_this.userpic = res.tempFilePaths[0];
						_this.$request.uploadFile(_this.userpic).then(res => {
							console.log(res);
							_this.userpic = res.url;
							_this.$request.post('member.update', {
								userpic: _this.userpic
							}).then(res => {
								_this.memberdetail();
							});
						});
					}
				});
			},
			nickname() {
				this.tui.href("/pagesA/my/nickname/nickname")
			},
			changeSex() {
				let _this = this
				uni.showActionSheet({
					itemList: ['男', '女'],
					success(e) {
						_this.sex = ['男', '女'][e.tapIndex];
						_this.$request.post('member.update', {
							sex: _this.sex
						}).then(res => {
							if (res.errno == 0) {

							}
						});
					}
				})
			},
			changeDate(e) {
				console.log(e)
				this.date = e.detail.value
			},
			logout() {
				uni.navigateTo({
					url: '/pages/login/logout?ptype=member'
				});
			},
			delid() {
				uni.navigateTo({
					url: '/pages/login/delid?ptype=member'
				});
			},
			showagreementAlert(code) {
				if (code == 'useragreement') {
					this.agreement.thiscontent = this.agreement.content;
				}
				if (code == 'privacypolicy') {
					if (this.agreement.privacypolicy) {
						this.agreement.thiscontent = this.agreement.privacypolicy.content;
					} else {
						this.agreement.thiscontent = '';
					}
			
				}
				this.showagreement = true;
			},
			hidewagreementAlert() {
				this.showagreement = false;
			},
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
		},
	}
</script>

<style>
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;
		background-color: #ffffff;
	}

	.tui-header {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}

	.tui-header-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px !important;
		width: 32px !important;
		transform: translateZ(0);
		z-index: 9999;
	}

	.tui-icon-box {
		position: relative;
		height: 20px !important;
		width: 20px !important;
		padding: 6px !important;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.topheight {
		color: #ffffff;
	}

	.tui-userinfo-box {
		padding-top: 10rpx;
		margin: 20rpx 0;
		color: #333;
	}

	.avatar-wrapper {
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		border-radius: 0px;
	}

	.tui-list-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 60rpx 24rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.tui-pr30 {
		padding-right: 30rpx;
	}

	.tui-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
	}

	.tui-content {
		font-size: 26rpx;
		color: #666;
	}

	.tui-butt {
		padding: 100rpx 24rpx;
	}

	.tui-modal-custom {
		padding-top: 60rpx;
		padding-bottom: 50rpx;
		text-align: center;
	}

	.tui-prompt-title {
		padding-bottom: 20rpx;
		font-size: 34rpx;
	}

	.tui-modal__btn {
		align-items: center;
		justify-content: space-between;
	}

	.tui-box {
		padding: 15rpx 20rpx;
		box-sizing: border-box;
	}

	.tui-btn-danger {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 98rpx;
		color: #fff;
	}

	.btn86 {
		height: 86rpx;
		line-height: 86rpx;
		border-radius: 98rpx;
		color: #fff;
	}

	.tui-exit {
		padding-top: 80rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 30rpx;
	}

	.tui-delid {
		padding-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-bottom: 30rpx;
	}
	.agreement {
		color: #666666;
		padding-top: 20rpx;
		padding-left: 26rpx;
	}
	
	.agreementbox {
		margin-top: 500rpx;
		font-size: 26rpx;
		color: #0078fb;
		text-align: center;
	}
	.tui-modal-agreement-text {
		font-size: 26rpx;
		line-height: 40rpx;
		font-weight: 200;
	}
	.agreementcla {
		padding-left: 5rpx;
		padding-right: 5rpx;
		color: #0078fb;
	}
	.tui-close__img {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 0;
		top: -60rpx;
	}
</style>